<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理界面</title>
<!-- 下载并引入jquery easyUI -->
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/color.css">
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>

	<!--  数据表格开始    -->
	<table id="goods_dg" title="商品信息" class="easyui-datagrid"
		style="width: 100%; height: 100%" url="../goods/list"
		toolbar="#goods_toolbar" rownumbers="true" pagination="true"
		fitColumns="true" singleSelect="true" data-options="fit:true">
		<thead>
			<tr>
				<th field="goodsNo" width="50">商品编号</th>
				<th field="goodsName" width="50">商品名称</th>
				<th field="goodsType" formatter="goodsTypeFormatter" width="50">商品类别</th>
				<th field="provider" formatter="providerFormatter" width="50">供应商</th>
				<th field="specification" width="50">商品规格</th>
				<th field="remark" width="50">商品描述</th>
				<th field="mainImage" formatter="imageFormatter" width="50">商品配图</th>
			</tr>
		</thead>
	</table>
	<div id="goods_toolbar">
		商品名称：<input type="text" name="goodsName" class="easyui-textbox"
			id="searchGoodsName" /> 商品类别：<input id="searchGoodsTypeNo"
			name="goodsType.typeNo" class="easyui-combobox"
			data-options="valueField:'typeNo',textField:'type',url:'../goods/goodstypelist'">
		供应商：<input id="searchProviderNo" name="provider.providerNo"
			class="easyui-combobox"
			data-options="valueField:'providerNo',textField:'provider',url:'../goods/providerlist'">
		<a id="searchbutton" href="javascript:doSearch();"
			class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
		<a id="resetbutton" href="javascript:doReset();"
			class="easyui-linkbutton" data-options="iconCls:'icon-search'">清空</a>
		<br /> <a href="#" class="easyui-linkbutton" iconCls="icon-add"
			plain="true" onclick="newGoods()">新增</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-edit" plain="true"
			onclick="editGoods()">修改</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="destroyGoods()">删除</a>
	</div>
	<!--  数据表格结束   -->

	<!-- 新增和修改对话框开始 -->
	<!-- 修改每个组件的id号，增加模块标志信息 -->
	<div id="goods_dlg" class="easyui-dialog"
		style="width: 450px; height: 320px; padding: 10px 20px" closed="true"
		buttons="#goods_dlg-buttons">
		<div class="ftitle">商品信息</div>

		<!-- 注意：如果form表单中包含有文件上传，则enctype的编码格式必须是：multipart/form-data 
	         如果使用了multipart/form-data进行编码，则表单的所有输入项都是以文件流的形式向服务器传输数据;每个input对应一个单独的文件流
	 -->
		<form id="goods_fm" enctype="multipart/form-data" method="post">
			<div class="fitem">
				<label>商品名称:</label> <input name="goodsName"
					class="easyui-validatebox" prompt="商品名称" required="true">
			</div>
			<div class="fitem">
				<label>商品类别:</label>
				<!-- 多表关联数据的接收 -->
				<input id="goodsTypeNo" name="goodsType.typeNo"
					class="easyui-combobox"
					data-options="valueField:'typeNo',textField:'type',url:'../goods/goodstypelist'"
					required="true">
			</div>
			<div class="fitem">
				<label>&emsp;供应商:</label> <input id="providerNo"
					name="provider.providerNo" class="easyui-combobox"
					data-options="valueField:'providerNo',textField:'provider',url:'../goods/providerlist'"
					required="true">
			</div>
			<div class="fitem">
				<label>商品规格:</label> <input name="specification"
					class="easyui-textbox">
			</div>

			<div class="fitem">
				<label>商品描述:</label> <input name="remark" class="easyui-textbox">
			</div>

			<div class="fitem">
				<label>商品主图:</label> <input name="file1" class="easyui-filebox">
			</div>
		</form>
	</div>
	<div id="goods_dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveGoods()">保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel"
			onclick="javascript:$('#goods_dlg').dialog('close')">取消</a>
	</div>

	<!-- 新增和修改对话框结束-->
	<script type="text/javascript">
		function goodsTypeFormatter(value, row, index) {
			return value.type;
		}

		function providerFormatter(value, row, index) {
			return value.provider;
		}

		/**
		   formmater常用有三个参数：value表示当前值，row当前行，index当前的行号
		 */
		function imageFormatter(value, row, index) {
			if (value) {
				return "<img height='80px' src='${pageContext.request.contextPath}/"+value+"'></img>";
			}
		}

		function doSearch() {
			//搜索参数去空格
			$("#searchGoodsName").textbox('setValue',
					$("#searchGoodsName").val().trim());
			
			//调用datagrid对象的load方法查询数据，并传递查询参数
			$("#goods_dg").datagrid("load", {
				"goodsName" : $("#searchGoodsName").val(),
				"goodsType.typeNo" : $("#searchGoodsTypeNo").val(),
				"provider.providerNo" : $("#searchProviderNo").val()
			});
		}

		function doReset() {
			$("#searchGoodsName").textbox('setValue', '');
			$("#searchGoodsTypeNo").combobox('clear');
			$("#searchProviderNo").combobox('clear');
			//清空查询参数后，重新加载数据
			$("#goods_dg").datagrid("load", {});
		}

		//点击数据表上的新增按钮，会调用这个方法
		function newGoods() {
			//打开新增对话框
			$('#goods_dlg').dialog('open').dialog('setTitle', '新增商品信息');
			//新增对话框包含了一个form表单，可能存在多次打开，这里对表单进行清空操作
			$('#goods_fm').form('clear');
			//设置新增数据时提交到服务器的url地址
			url = '../goods/add';
			//新增数据，默认选择商品类型和供应商的第一条数据
			loadGoodsTypeSuccess();
			loadProviderSuccess();
		}

		function loadGoodsTypeSuccess(value) {
			$("#goodsTypeNo")
					.combobox(
							{
								onLoadSuccess : function(data) {
									if (data) {
										if (value) {
											$("#goodsTypeNo").combobox(
													'select', value);
										} else {
											$("#goodsTypeNo").combobox(
													'select', data[0].typeNo);
										}
									}
								}
							});
		}

		function loadProviderSuccess(value) {
			$("#providerNo").combobox(
					{
						onLoadSuccess : function(data) {
							if (data) {
								if (value) {
									$("#providerNo").combobox('select', value);
								} else {
									$("#providerNo").combobox('select',
											data[0].providerNo);
								}
							}
						}
					});
		}

		function editGoods() {
			var row = $('#goods_dg').datagrid('getSelected');
			if (row) {
				$('#goods_dlg').dialog('open').dialog('setTitle', '编辑商品信息');
				$('#goods_fm').form('load', row);
				url = '../goods/edit?goodsNo=' + row.goodsNo;
				//修改数据时，自定选择当前要修改的数据
				loadGoodsTypeSuccess(row.goodsType.typeNo);
				loadProviderSuccess(row.provider.providerNo);
			} else {
				$.messager.show({
					title : 'Error',
					msg : "请选择要修改的商品信息"
				});
			}
		}

		function saveGoods() {
			$('#goods_fm').form('submit', {
				url : url,
				onSubmit : function() {
					return $(this).form('validate');//提交表单前先进行表单数据验证，验证通过才提交数据到服务器；验证失败不提交数据
				},
				success : function(result) {//收到服务器响应的json字符串后，调用这里的代码  -- 回调函数，当浏览器收到服务器返回的数据后才执行
					var result = eval('(' + result + ')');
					if (!result.success) {
						//新增失败，使用消息框提示错误信息
						$.messager.show({
							title : 'Error',
							msg : result.errorMsg
						});
					} else {
						$('#goods_dlg').dialog('close'); // 新增成功，关闭新增对话框
						$('#goods_dg').datagrid('reload'); // 新增成功，刷新列表数据
					}
				}
			});
		}

		function destroyGoods() {
			var row = $('#goods_dg').datagrid('getSelected');
			if (row) {
				$.messager.confirm('Confirm', '确定删除?误删今晚加班!', function(r) {
					if (r) {
						$.post('../goods/delete', {
							goodsNo : row.goodsNo
						}, function(result) {
							if (result.success) {
								$('#goods_dg').datagrid('reload'); // reload the user data
							} else {
								$.messager.show({ // show error message
									title : 'Error',
									msg : result.errorMsg
								});
							}
						}, 'json');
					}
				});
			}
		}
	</script>

</body>
</html>